<template>
  <div class="">
    <div class="display-flex" style="height:10px;">
      <div
        v-for="(item, index) in 5"
        v-show="block.checked"
        :key="index"
        :class="`flex1 ${block.checked && programTime === index ? 'bg-block' + index : ''}`"
        :style="`border:1px solid #eee;`"
      />
    </div>
    <div :class="`flex-center block ${block.checked ? 'checked': ''}`" :style="`${block.border && !block.checked ? block.border: ''}`">
      {{ block.value === -1 ? '' : block.value }}
    </div>
    <div class="display-flex" style="height:10px;">
      <div
        v-for="(item, index) in 5"
        v-show="block.checked"
        :key="index"
        :class="`flex1 ${block.checked && programTime === index ? 'bg-block' + index : ''}`"
        :style="`border:1px solid #eee;`"
      />
    </div>
  </div>
</template>
<script>
/**
 * problem2
 */
export default {
  name: 'UIBlock',
  props: {
    programTime: {
      type: Number,
      default() {
        return 0;
      }
    },
    block: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style lang="scss">
@import "../../../styles/index";
.block{
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
}
.checked{
  background: rgb(145, 189, 255);
  color: #fff;
}
.bg-block0{background: rgb(252, 141, 133)}
.bg-block1{background: rgb(220, 223, 52)}
.bg-block2{background: rgb(76, 236, 130)}
.bg-block3{background: rgb(138, 136, 248)}
.bg-block4{background: rgb(248, 136, 201)}
</style>